<template>
<div>
  <van-nav-bar
      title="资讯页面"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <view class="container">
    <view class="search-bar">
      <van-search
          v-model="value"
          show-action
          placeholder="搜索资讯"
          @search="onSearch"
      >
        <template #action>
          <van-button type="primary" size="small" @click="onSearchButton">搜索</van-button>
        </template>
      </van-search>
    </view>
    <van-cell-group>
      <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
      >
        <van-swipe-cell  v-for="n in items" >
          <!-- 添加图像，这里使用van-image组件 -->
          <van-cell
              :title="n.title"
              :to="'/newsDetails/' +n.id"
          >
          <template #label>
            <div class="ellipsis-content">{{n.content}}</div>
            <div>{{n.publishDate}}</div>
          </template>
          <template #value>
            <van-image
                slot="left"
                :src="n.imageUrl"
                fit="cover"
                class="square-image"
            />
          </template>
          </van-cell>
        </van-swipe-cell>
      </van-list>
    </van-cell-group>
  </view>
  <!-- 新增固定底部的按钮容器 -->
  <div class="fixed-button-container">
    <van-button icon="plus" type="primary" class="round-button" @click="router.push('/createNews')" />
  </div>
</div>
</template>

<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import {get} from "../../util/request.js"
import {useRouter} from "vue-router";
const router = useRouter();
const items=ref([]);
const onClickLeft = () => history.back();
const value = ref('');
const onSearch = () => {
  get(`home/searchNews/${value.value}`).then( r=>{
    loading.value = false;
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      items.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });
}
const onSearchButton = () => {
  get(`home/searchNews/${value.value}`).then( r=>{
    loading.value = false;
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      items.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });
}
const finished = ref(false);
const loading = ref(false);
const onLoad = () => {
  get('home/getNews').then( r=>{
    if (r.code == 0){ // 获取成功
      loading.value = true;
      // alert("查询成功")
      items.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });
}

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.search-bar {
  width: 100%;
  padding: 10px;
}


.square-image {
  width: 100px; /* 根据需要设置宽度 */
  height: 100px; /* 保持与宽度相同，形成正方形 */
  margin-right: 10px; /* 可选，根据布局需求设置边距 */
}
.ellipsis-content {
  display: -webkit-box; /* 对Webkit内核生效 */
  -webkit-line-clamp: 1; /* 行数 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  max-width: 10em; /* 或根据实际需要设置宽度 */
}
.fixed-button-container {
  position: fixed;
  bottom: 20px; /* 调整距离底部的距离 */
  left: 50%;
  transform: translateX(-50%); /* 居中显示 */
  z-index: 999; /* 确保按钮在最上层 */
}

.round-button {
  width: 50px; /* 按钮宽度 */
  height: 50px; /* 按钮高度，与宽度相同以形成圆形 */
  border-radius: 50%; /* 使按钮变为圆形 */
  /* 可选：调整图标和文字样式以适应圆形按钮 */
}
</style>